<template>
  <div class="layout-col flex3 bs ml15">
	<div class="ww100 flex-bc plr12 ptb8 bs2">
		<div class="flex-sc">
		  <div class="h30"><img class="hh100" src="@/assets/images/tibi-ico.png" /></div>
		  <span class="f15 fw ml8">告警数据</span>
		</div>
	</div>
	<div class="ww100 flex-bc tc ptb13 bgi22">
		<div class="flex4 tl pl15">配电房名称</div>
		<div class="flex4 tl">传感器名称</div>
		<div class="flex3 tl">安装位置(实际安装位置)</div>
		<div class="flex3 tl">告警时间</div>
		<div class="flex3 tl">告警内容</div>
		<div class="flex2">数值</div>
	</div>
	<vue3-seamless-scroll :list="publicStore._public.EE" :step="state.step" :limitScrollNum="state.limitScrollNum" class="overlay flex1 ww100">
		<div class="flex-bc tc ptb13" :class="i%2 == 1?'bgi23':'bgi18'" v-for="(v, i) in publicStore._public.EE" :key="i">
			<div class="flex4 tl pl15">{{v.name}}</div>
			<div class="flex4 tl">{{v.sensor}}</div>
			<div class="flex3 tl">{{v.location}}</div>
			<div class="flex3 tl">{{v.alarmTime}}</div>
			<div class="flex3 tl">{{v.alarmContent}}</div>
			<div class="flex2 i21">{{v.value == ''? '/' : v.value}}</div>
		</div>
	</vue3-seamless-scroll>
  </div>
</template>

<script lang="ts" setup>
  import { Vue3SeamlessScroll } from "vue3-seamless-scroll"
  const { proxy }:any = getCurrentInstance()
  const publicStore = proxy.publicStore()
  const state = reactive({
	  ...publicStore.$state,
		step: 0.4,
		limitScrollNum: 4,
		content: [
			{ show: true, key: 'name',   name: '配电房名称' },
			{ show: true, key: 'sensor',   name: '传感器名称' },
			{ show: true, key: 'location', name: '安装位置' },
			{ show: true, key: 'alarmTime',name: '告警时间' },
			{ show: true, key: 'alarmContent', name: '告警内容' },
			{ show: true, key: 'value', name: '数值' },
		]
  })
</script>

<style scoped lang="scss">

</style>
